<template>
 <div class="main">
    <div class="header">
        <div style="width: 60px; height:60px; background-color:orange; line-height: 60px; text-align: center; color: aliceblue; font-size: 40px; border-radius: 30%; font-weight: 700;  float: left;">Mi</div>
        <span style="float: left; height: 60px; line-height: 60px; font-size: 30px; font-weight: 500; color: aliceblue; margin-left: 20px;">小米商品管理</span>
        <div style="float: right;  margin-top: 12px;">
            <shopbus />
        </div>
    </div>
    <div class="flow" style="margin-top: 40px;">
            <el-carousel :interval="4000" type="card" height="250px" width="700px">
                <el-carousel-item v-for="(item,index) in urls" :key="index">
                  <img :src="item.url" @click="httpupto(index)" alt="" style="height:100%; width:100%">
                </el-carousel-item>
            </el-carousel>
    </div>
    <div class="shop">
      <div class="phone">
        <div class="title">手机</div>
        <div class="phone1 float" @click="upto(0)"><img src="../../public/mimages/phone1.png" alt="" width="100%" height="100%"></div>
        <div class="phone2">
          <div class="phone3 float">
            <div class="phone5 spaces " @click="upto(0)">
              <img src="../../public/mimages/phone2.png" alt="" width="85%" height="60%">
              <p class="p1">Redmi k60</p>
              <p class="p2">骁龙8+|2k高光直屏|5500mAh...</p>
              <p class="p3">2499元起</p>
            </div>
            <div class="phone5 spaces" @click="upto(1)">
              <img src="../../public/mimages/phone3.png" alt="" width="85%" height="60%" >
              <p class="p1">Redmi k60 Pro</p>
              <p class="p2">【第二代骁龙8】狂暴引擎</p>
              <p class="p3">3299元起</p>
            </div>
            <div class="phone5" @click="upto(2)">
              <img src="../../public/mimages/phone4.png" alt="" width="85%" height="60%" >
              <p class="p1">Redmi Note 12 Pro 极速版</p>
              <p class="p2">高通骁龙778G，OLED柔性直屏...</p>
              <p class="p3">1699元起</p>
            </div>
          </div>
          <div class="phone4 float">
            <div class="phone5 spaces " @click="upto(3)">
              <img src="../../public/mimages/phone5.png" alt="" width="85%" height="60%">
              <p class="p1">Xiaomi 13 Pro</p>
              <p class="p2">全新第二代骁龙8 | 徕卡专业光...</p>
              <p class="p3">4999元起</p>
            </div>
            <div class="phone5 spaces " @click="upto(4)">
              <img src="../../public/mimages/phone6.png" alt="" width="85%" height="60%">
              <p class="p1">Xiaomi 13</p>
              <p class="p2">全新第二代骁龙8 | 徕卡专业光...</p>
              <p class="p3">3499元起</p>
            </div>  
          </div>
          <div class="phone5-1 float">
              <div class="phone6 "  @click="upto(5)">
                <div class="phone6-1">
                  <p class="p1">Xiaomi 13 限量定制色</p>
                  <p class="p3" style="margin-top: 10px;">4999元起</p>
                </div>
                <div class="phone6-2">
                  <img src="../../public/mimages/phone7.png" alt="">
                </div>
              </div>
              <div class="phone7 " @click="uptoshop(0)">
                <div class="phone7-1">
                  <p class="p1">浏览更多</p>
                  <p class="p2" style="margin-top: 10px;">手机</p>
                </div>
                <div class="phone7-2">
                  <i class="el-icon-d-arrow-right"></i>
                </div>
              </div>
            </div>
        </div>
      </div>
      <div class="pad">
        <div class="title">电脑 | 平板</div>
        <div class="phone1 float" @click="upto(6)"><img src="../../public/mimages/pad1.png" alt="" width="100%" height="100%"></div>
        <div class="phone2">
          <div class="phone3 float">
            <div class="phone5 spaces" @click="upto(7)">
              <img src="../../public/mimages/pad2.png" alt="" width="85%" height="60%">
              <p class="p1">Redmi G Pro 游戏本</p>
              <p class="p2">狂风调校的高能电竞本</p>
              <p class="p3">8999元起</p>
            </div>
            <div class="phone5 spaces" @click="upto(8)">
              <img src="../../public/mimages/pad3.png" alt="" width="85%" height="60%" >
              <p class="p1">Redmi Book Pro 14 2022</p>
              <p class="p2">全新12代英特尔处理器...</p>
              <p class="p3">3299元起</p>
            </div>
            <div class="phone5" @click="upto(9)">
              <img src="../../public/mimages/pad4.png" alt="" width="85%" height="60%" >
              <p class="p1">Redmi Pad</p>
              <p class="p2">入门平板，屏幕/外观/系统三大...</p>
              <p class="p3">1299元起</p>
            </div>
          </div>
          <div class="phone4 float">
            <div class="phone5 spaces" @click="upto(10)">
              <img src="../../public/mimages/pad5.png" alt="" width="85%" height="60%">
              <p class="p1">RedmiBook Pro 15 2022 锐龙版</p>
              <p class="p2">可选全新锐龙7 6800H处理器...</p>
              <p class="p3">5499元起</p>
            </div>
            <div class="phone5 spaces" @click="upto(11)">
              <img src="../../public/mimages/pad6.png" alt="" width="85%" height="60%">
              <p class="p1">小米平板5 Pro</p>
              <p class="p2">骁龙870芯片 | 2.5k超高清 | 12...</p>
              <p class="p3">2499元起</p>
            </div>
          </div>
          <div class="phone5-1 float">
              <div class="phone6" @click="upto(12)">
                <div class="phone6-1" >
                  <p class="p1">小米平板5 Pro 12.4</p>
                  <p class="p3" style="margin-top: 10px;">2999元起</p>
                </div>
                <div class="phone6-2">
                  <img src="../../public/mimages/pad7.png" alt="">
                </div>
              </div>
              <div class="phone7"  @click="uptoshop(1)">
                <div class="phone7-1">
                  <p class="p1">浏览更多</p>
                  <p class="p2" style="margin-top: 10px;">平板和电脑</p>
                </div>
                <div class="phone7-2">
                  <i class="el-icon-d-arrow-right"></i>
                </div>
              </div>
            </div>
        </div>
      </div>
      <div class="pods">
        <div class="title">耳机 | 手表</div>
        <div class="phone1 float" @click="upto(13)"><img src="../../public/mimages/pods1.png" alt="" width="100%" height="100%"></div>
        <div class="phone2">
          <div class="phone3 float">
            <div class="phone5 spaces" @click="upto(14)">
              <img src="../../public/mimages/pods2.png" alt="" width="85%" height="60%">
              <p class="p1">Xiaomi Buds 4 Pro</p>
              <p class="p2">48dB智能动态降噪 | 骨声纹通话...</p>
              <p class="p3">999元</p>
            </div>
            <div class="phone5 spaces" @click="upto(15)">
              <img src="../../public/mimages/pods3.png" alt="" width="85%" height="60%" >
              <p class="p1">Xiaomi Buds 3 Pro</p>
              <p class="p2">40dB自适应降噪 | 空间音频 | ...</p>
              <p class="p3">499元</p>
            </div>
            <div class="phone5" @click="upto(16)">
              <img src="../../public/mimages/pods4.png" alt="" width="85%" height="60%" >
              <p class="p1">Xiaomi Buds 3</p>
              <p class="p2">40dB宽频主动降噪 | HiFi高保真...</p>
              <p class="p3">299元</p>
            </div>
          </div>
          <div class="phone4 float" >
            <div class="phone5 spaces" @click="upto(17)">
              <img src="../../public/mimages/pods5.png" alt="" width="85%" height="60%">
              <p class="p1">Redmi Buds 3</p>
              <p class="p2">轻巧半入耳 | 通话降噪 | 20小...</p>
              <p class="p3">159元</p>
            </div>
            <div class="phone5 spaces" @click="upto(18)">
              <img src="../../public/mimages/pods6.png" alt="" width="85%" height="60%">
              <p class="p1">Redmi Buds 3 青春版</p>
              <p class="p2">轻巧真无线 | 猫耳状稳固设计 |...</p>
              <p class="p3">99元</p>
            </div>
          </div>
          <div class="phone5-1 float">
              <div class="phone6">
                <div class="phone6-1" @click="upto(19)">
                  <p class="p1">Xiaomi 骨传感耳机</p>
                  <p class="p3" style="margin-top: 10px;">699元</p>
                </div>
                <div class="phone6-2">
                  <img src="../../public/mimages/pods7.png" alt="">
                </div>
              </div>
              <div class="phone7"  @click="uptoshop(2)">
                <div class="phone7-1">
                  <p class="p1">浏览更多</p>
                  <p class="p2" style="margin-top: 10px;">耳机和配饰</p>
                </div>
                <div class="phone7-2">
                  <i class="el-icon-d-arrow-right"></i>
                </div>
              </div>
            </div>
        </div>
      </div>
    </div>
 </div>
</template>
<script>
import shopbus from '../Mi/shopBus.vue'
import axios from 'axios';
export default{
 name: 'mi',
 components: {
  shopbus
 },
 data(){
  return{
    commodityValue:{
      index:0,
      id:0
    },
    commodityListvalue:{
      index:0,
      id:0
    },
    urls:[
      {url:require('../../public/mimages/mi1.png')},
      {url:require('../../public/mimages/mi2.png')},
      {url:require('../../public/mimages/mi3.png')},
      {url:require('../../public/mimages/mi4.png')},
      {url:require('../../public/mimages/mi5.png')}
    ],
    httpurls:[
      { path:'mik60' },
      { path:'xiaomi13'},
      { path:'xiaomisoundpro'},
      { path:'xiaomibuds4'},
      { path:'xiaomiwatchs2'}
    ],
    dateilshttps:[
      { path:'shopdetails' },
    ],
  }
 },
 methods:{
  uptoshop(ins){
    this.commodityListvalue.index = ins
    axios.patch('http://localhost:3001/mishowlistindex/0', this.commodityListvalue).then(()=>{
      this.$router.push('miphone')
                })  
  },
  httpupto(index){
    this.$router.push(this.httpurls[index].path)
  },
  upto(index){
    this.commodityValue.index = index
    console.log(this.commodityValue);
    axios.patch('http://localhost:3001/mindex/0', this.commodityValue).then(()=>{
      this.$router.push(this.dateilshttps[0].path)
                })  
  }
 }
};
</script>

<style scoped lang='less'>
.main{
  background: linear-gradient(rgb(229, 227, 227),rgb(228, 227, 202));
}
.header{
    height: 100px;
    width:90%;
    margin-left: 6%;
    padding: 20px 100px;
    background-color: rgba(0, 0, 0, 0.85);
    border-radius: 5px;
}
.shop{
  width: 800px;
  height: 1695px;
  position: relative;
  top: 30px;
  margin: auto;
  .phone{
    height: 530px;
    margin-bottom: 30px;
  }
  .pad{
    height: 530px;
    margin-bottom: 30px;
  }
  .pods{
    height: 530px;
  }
  .title{
    height: 30px;
    width: 100%;
    font-size: 22px;
    color: #404141;
  }
  .p1{
    margin-top: 10px;
    font-size: 13px;
    color: black;
  }
  .p2{
    margin: 11px 0 11px 0;
    font-size: 11px;
    color: #74787d;
  }
  .p3{
    font-size: 12px;
    color: orange;
  }
  .phone1{
      width: 200px;
      height: 500px;
      float: left;
      margin-right: 10px;
    }
    .phone2{
      width: 590px;
      height: 100%;
      float: left;
      .phone3{
        height: 245px;
        margin-bottom: 10px;
      }
      .phone4{
        height: 245px;
        width: 400px;
        float: left;
      }
      .phone5{
          height:245px; 
          width: 190px;
          float: left;
          background-color: white;
          text-align: center;
          img{
            margin-top: 12px;
          }
      }
      .phone5-1{
          height:245px; 
          width: 190px;
          float: left;
          text-align: center;
          img{
            margin-top: 12px;
          }
          .phone6{
            height: 118px;
            margin-bottom: 10px;
            background-color: white;
            .phone6-1{
              width: 90px;
              height: 80px;
              margin: 34px 0 0 10px;
              float: left;
            } 
            .phone6-2{
              width: 90px;
              height: 90px;
              margin: 5px 0 0 0;
              float: left;
              img{
                width: 100%;
                height: 100%;
              }
            } 
          }
          .phone7{
            height: 117px;
            background-color: white;
            .phone7-1{
              width: 70px;
              height: 80px;
              margin: 34px 0 0 50px;
              float: left;
            } 
            .phone7-2{
              width: 30px;
              height: 30px;
              margin: 45px 0 0 0;
              float: left;
              color: #475669;
              i{
                font-size: 23px;
              }
            } 
          }
          .phone7 :hover{
            color: orange;
          }
      }
      .spaces{
        margin-right: 10px;
      }
    }
  .float :hover{
    box-shadow: 5px 5px 5px #9e9a9a;
    transition: 0.5s;
  }
  .phone5 :hover{
    box-shadow:none
  }
  .phone6 :hover{
    box-shadow:none
  }
  .phone7 :hover{
    box-shadow:none
  }
}
.el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
  }
  
  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }
  
  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
</style>